<template>
	<scroll-view
		scroll-y="true"
		:style="{height: contentHeight + 'px'}"
		class="menu-scroll"
	>
		<view 
			class="menu-item font32 color-b3" 
			v-for="(item, index) in menuList"
			:class="[menuIndex == index ? 'active':'']"
			@click="change(index,item)"
		>
			{{ item}}
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { ref,defineEmits } from 'vue';
	  import emitter from '@/util/Bus.ts';
	const emit = defineEmits(['getItemMenu'])
	const props = defineProps({
		contentHeight: {
			type: Number,
			default: 0
		},
		menuList:{
			type: [Object, Array],
			default: 0
		}
	})
	
	const menuIndex = ref(0)
	function change(index,itemMenu){
		menuIndex.value = index
		console.log(itemMenu,'itemMenu')
		emit('getItemMenu',index)
		emitter.emit('index',index)
		// console.log(item,'item')
		// emit('getItem',item)
	}
	
</script>

<style lang="scss" scoped>
	.menu-scroll {
		width: 196rpx;
		padding: 0 12rpx;
		margin-bottom: 28rpx;
	}
	.menu-item {
		padding: 12rpx 22rpx;
		margin-top: 20rpx;
		&.active {
			background-color: #3FA897;
			border-radius: 36rpx;
			color: #fff;
		}
	}
</style>
